<template>
    <svg v-if="iconSvg" :class="cls" fill="currentColor" :style="innerStyle" v-bind="iconSvg.attrs" v-html="iconSvg.innerHtml"></svg>
</template>
<script lang="ts">
import { getPrefixCls } from '../_utils/global-config';
import { defineComponent, computed, CSSProperties } from 'vue';  // 引入computed
import { getIconSvg } from '../_utils/icon-register'
export default defineComponent({
    name: "Icon",
    props: {
        /**
         * @zh 图标名称
         * @en Icon name
         * @required true
         */
        name: {
            type: String,
            required: true
        },
        /**
         * @zh 图标大小
         * @en Icon size
         * @default 16
         */
        size: {
            type: Number,
            default: 16
        },
        spin: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const prefixCls = getPrefixCls('icon');
        const iconSvg = getIconSvg(props.name);

        const cls = computed(() => [
            prefixCls,
            {
                [`${prefixCls}-loading`]: props.spin
            }
        ]);

        const innerStyle = computed(() => {
            const style: CSSProperties = {};
            if(props.size){
                style.fontSize = `${props.size}px`;
            }
            return style;
        });
        

        return {
            prefixCls,
            cls,
            iconSvg,
            innerStyle
        }
    }
})
</script>